<template>
  <view class="user-profile">
    <!-- 顶部个人信息区域 -->
    <view class="user-header" :style="{ backgroundImage: `url(${backgroundImages.header})` }">
      <view class="header-bg"></view>
      
      <!-- 设置按钮 -->
      <view class="settings-btn" @click="navigateToSettings">
        <image class="settings-icon" :src="getImageUrl('/static/Images/user/Shezhi.png')" mode="aspectFit"></image>
      </view>
      
      <!-- 用户信息 -->
      <view class="user-info">
        <view class="avatar-container">
          <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
        </view>
        <view class="user-details">
          <view class="nickname-row">
            <text class="nickname">{{ userInfo.nickname }}</text>
          </view>
          
          <!-- 认证标签和信用等级 -->
          <view class="tag-credit-row">
            <view class="verified-tag" v-if="userInfo.verified">
              <image class="verified-icon" :src="getImageUrl('/static/Images/user/Shiming.png')" mode="aspectFit"></image>
              <text class="verified-text">已认证</text>
            </view>
            
            <view class="credit-level">
              <text class="level-text">信誉</text>
              <view class="stars">
                <image 
                  v-for="(star, index) in 5" 
                  :key="index"
                  class="star-icon" 
                  :src="index < userInfo.creditLevel ? getImageUrl('/static/Images/user/Huanguan.png') : getImageUrl('/static/Images/user/Zuanshi.png')" 
                  mode="aspectFit"
                  :style="{ opacity: index < userInfo.creditLevel ? 1 : 0.3 }"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 余额区域 -->
    <view class="balance-container">
      <view class="balance-item">
        <view class="balance-label">
          <text>我的余额(元)</text>
          <image class="eye-icon" :src="showBalance ? '/static/Images/user/Yincang.png' : '/static/Images/user/Chakan.png'" mode="aspectFit" @click="toggleBalanceVisibility"></image>
        </view>
        <text class="balance-value">{{ showBalance ? formatBalance(userInfo.balance) : '******' }}</text>
      </view>
      <view class="balance-divider"></view>
      <view class="balance-item">
        <view class="balance-label">我的佣金(元)</view>
        <text class="balance-value">{{ showBalance ? formatBalance(userInfo.commission) : '******' }}</text>
      </view>
    </view>
    
    <!-- 我买的订单 -->
    <view class="order-section">
      <view class="section-header">
        <text class="section-title">我买的</text>
        <view class="view-all" @click="navigateToAllOrders('buy')">
          <text class="view-all-text">全部</text>
          <image class="arrow-icon" :src="getImageUrl('/static/Images/shop/Qianjin.png')" mode="aspectFit"></image>
        </view>
      </view>
      
      <view class="order-icons">
        <view class="order-icon-item" @click="navigateToOrderList('buy', 'pending_payment')">
          <image class="order-icon" src="/static/Images/user/Daifukuan.png" mode="aspectFit"></image>
          <text class="order-icon-text">待付款</text>
        </view>
        <view class="order-icon-item" @click="navigateToOrderList('buy', 'pending_delivery')">
          <image class="order-icon" src="/static/Images/user/Daifahuo.png" mode="aspectFit"></image>
          <text class="order-icon-text">待发货</text>
        </view>
        <view class="order-icon-item" @click="navigateToOrderList('buy', 'pending_receipt')">
          <image class="order-icon" src="/static/Images/user/Daishouhuo.png" mode="aspectFit"></image>
          <text class="order-icon-text">待收货</text>
        </view>
        <view class="order-icon-item" @click="navigateToOrderList('buy', 'completed')">
          <image class="order-icon" src="/static/Images/user/Jiaoyicheng.png" mode="aspectFit"></image>
          <text class="order-icon-text">交易成功</text>
        </view>
        <view class="order-icon-item" @click="navigateToOrderList('buy', 'refund')">
          <image class="order-icon" src="/static/Images/user/Tuikuan.png" mode="aspectFit"></image>
          <text class="order-icon-text">退款/售后</text>
        </view>
      </view>
    </view>
    
    <!-- 我卖的订单 -->
    <view class="order-section">
      <view class="section-header">
        <text class="section-title">我卖的</text>
        <view class="view-all" @click="navigateToAllOrders('sell')">
          <text class="view-all-text">全部</text>
          <image class="arrow-icon" :src="getImageUrl('/static/Images/shop/Qianjin.png')" mode="aspectFit"></image>
        </view>
      </view>
      
      <view class="order-icons">
        <view class="order-icon-item" @click="navigateToOrderList('sell', 'card_management')">
          <image class="order-icon" :src="getImageUrl('/static/Images/user/Kamiguanli.png')" mode="aspectFit"></image>
          <text class="order-icon-text">卡密管理</text>
        </view>
        <view class="order-icon-item" @click="navigateToOrderList('sell', 'pending_delivery')">
          <image class="order-icon" :src="getImageUrl('/static/Images/user/Daifahuo.png')" mode="aspectFit"></image>
          <text class="order-icon-text">待发货</text>
        </view>
        <view class="order-icon-item" @click="navigateToOrderList('sell', 'delivered')">
          <image class="order-icon" :src="getImageUrl('/static/Images/user/Daishouhuo.png')" mode="aspectFit"></image>
          <text class="order-icon-text">已发货</text>
        </view>
        <view class="order-icon-item" @click="navigateToOrderList('sell', 'completed')">
          <image class="order-icon" :src="getImageUrl('/static/Images/user/Jiaoyicheng.png')" mode="aspectFit"></image>
          <text class="order-icon-text">交易成功</text>
        </view>
        <view class="order-icon-item" @click="navigateToOrderList('sell', 'refund')">
          <image class="order-icon" :src="getImageUrl('/static/Images/user/Tuikuan.png')" mode="aspectFit"></image>
          <text class="order-icon-text">退款/售后</text>
        </view>
      </view>
    </view>
    
    <!-- 功能模块区域 -->
    <view class="feature-grid">
      <view class="feature-item" @click="navigateToFeature('distribution')">
        <image class="feature-icon" :src="getImageUrl('/static/Images/user/Fenxiao.png')" mode="aspectFit"></image>
        <text class="feature-text">分销管理</text>
      </view>
      <view class="feature-item" @click="navigateToFeature('team')">
        <image class="feature-icon" :src="getImageUrl('/static/Images/user/Team.png')" mode="aspectFit"></image>
        <text class="feature-text">我的团队</text>
      </view>
      <view class="feature-item" @click="navigateToFeature('verification')">
        <image class="feature-icon" :src="getImageUrl('/static/Images/user/Shiming.png')" mode="aspectFit"></image>
        <text class="feature-text">实名认证</text>
      </view>
      <view class="feature-item" @click="navigateToFeature('customer_service')">
        <image class="feature-icon" :src="getImageUrl('/static/Images/user/Kefu.png')" mode="aspectFit"></image>
        <text class="feature-text">在线客服</text>
      </view>
      <view class="feature-item" @click="navigateToFeature('registration_agreement')">
        <image class="feature-icon" :src="getImageUrl('/static/Images/user/Zhuce.png')" mode="aspectFit"></image>
        <text class="feature-text">注册协议</text>
      </view>
      <view class="feature-item" @click="navigateToFeature('privacy_agreement')">
        <image class="feature-icon" :src="getImageUrl('/static/Images/user/Yinsi.png')" mode="aspectFit"></image>
        <text class="feature-text">隐私协议</text>
      </view>
      <view class="feature-item" @click="navigateToFeature('business_cooperation')">
        <image class="feature-icon" :src="getImageUrl('/static/Images/user/Yewu.png')" mode="aspectFit"></image>
        <text class="feature-text">业务合作</text>
      </view>
      <view class="feature-item" @click="navigateToFeature('platform_rules')">
        <image class="feature-icon" :src="getImageUrl('/static/Images/user/Guize.png')" mode="aspectFit"></image>
        <text class="feature-text">平台规则</text>
      </view>
    </view>
    
    <view class="feature-grid">
      <view class="feature-item" @click="navigateToFeature('registration_agreement')">
        <image class="feature-icon" :src="getImageUrl('/static/Images/user/Zhuce.png')" mode="aspectFit"></image>
        <text class="feature-text">注册协议</text>
      </view>
      <view class="feature-item" @click="navigateToFeature('privacy_agreement')">
        <image class="feature-icon" :src="getImageUrl('/static/Images/user/Yinsi.png')" mode="aspectFit"></image>
        <text class="feature-text">隐私协议</text>
      </view>
      <view class="feature-item" @click="navigateToFeature('business_cooperation')">
        <image class="feature-icon" :src="getImageUrl('/static/Images/user/Yewu.png')" mode="aspectFit"></image>
        <text class="feature-text">业务合作</text>
      </view>
      <view class="feature-item" @click="navigateToFeature('platform_rules')">
        <image class="feature-icon" :src="getImageUrl('/static/Images/user/Guize.png')" mode="aspectFit"></image>
        <text class="feature-text">平台规则</text>
      </view>
    </view>
    
    <!-- 底部安全区域 -->
    <view class="safe-area-bottom"></view>
    
    <!-- 底部导航栏 -->
    <tab-bar :active="4"></tab-bar>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import TabBar from '@/components/TabBar.vue';
import { getImageUrl } from '@/config/api';

// 用户信息
const userInfo = reactive({
  nickname: 'H好预言',
  avatar: '/static/Images/touxiang/1.png',
  verified: true,
  creditLevel: 3,
  balance: 88888000.88,
  commission: 10000.00
});

// 控制余额显示/隐藏
const showBalance = ref(false);

// 切换余额显示/隐藏状态
const toggleBalanceVisibility = () => {
  showBalance.value = !showBalance.value;
};

// 格式化余额显示
const formatBalance = (value) => {
  return value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};

// 导航到设置页面
const navigateToSettings = () => {
  uni.navigateTo({
    url: '/pages/user/settings'
  });
};

// 导航到所有订单页面
const navigateToAllOrders = (type) => {
  uni.navigateTo({
    url: `/pages/shop/orderlist?type=${type}`
  });
};

// 导航到订单列表页面
const navigateToOrderList = (type, status) => {
  uni.navigateTo({
    url: `/pages/shop/orderlist?type=${type}&status=${status}`
  });
};

// 导航到功能页面
const navigateToFeature = (feature) => {
  const routes = {
    distribution: '/pages/fenxiao/index',
    team: '/pages/team/index',
    verification: '/pages/realname/index',
    customer_service: '/pages/common/customer-service',
    registration_agreement: '/pages/text/textdetail?type=registration',
    privacy_agreement: '/pages/text/textdetail?type=privacy',
    business_cooperation: '/pages/text/textdetail?type=business',
    platform_rules: '/pages/text/textdetail?type=rules'
  };
  
  if (routes[feature]) {
    uni.navigateTo({
      url: routes[feature]
    });
  }
};

// 背景图片计算属性
const backgroundImages = {
  header: getImageUrl('/static/Images/user/Toubu.png')
};
</script>

<style lang="scss">
.user-profile {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

/* 顶部个人信息区域 */
.user-header {
  position: relative;
  padding-top: 88rpx;
  height: 400rpx;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to bottom, #FF5151, #FF8282);
  z-index: -1;
}

.settings-btn {
  position: absolute;
  top: 108rpx;
  right: 30rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-icon {
  width: 40rpx;
  height: 40rpx;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 60rpx 30rpx 0;
}

.avatar-container {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 4rpx solid #fff;
  overflow: hidden;
  margin-right: 20rpx;
}

.avatar {
  width: 100%;
  height: 100%;
}

.user-details {
  flex: 1;
}

.nickname-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.nickname {
  font-size: 36rpx;
  color: #fff;
  font-weight: 500;
}

.tag-credit-row {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.verified-tag {
  display: flex;
  align-items: center;
  background-color: #545C7E;
  border-radius: 30rpx;
  padding: 4rpx 12rpx;
}

.verified-icon {
  width: 24rpx;
  height: 24rpx;
  margin-right: 6rpx;
}

.verified-text {
  font-size: 22rpx;
  color: #fff;
}

.credit-level {
  display: flex;
  align-items: center;
  background-image: url('/static/Images/user/Xinyu.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 10rpx;
  height: 65rpx;
}

.level-text {
  font-size: 24rpx;
  color: #fff;
  margin-right: 10rpx;
}

.stars {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
}

.star-icon {
  width: 24rpx;
  height: 24rpx;
  margin-right: 6rpx;
}

/* 余额区域 */
.balance-container {
  margin: -80rpx 30rpx 30rpx;
  background-color: #FF5151;
  background-image: url('/static/Images/user/wallet.png');
  background-size: 120%;

  background-repeat: no-repeat;
  border-radius: 20rpx;
  display: flex;
  padding: 30rpx 0;
  box-shadow: 0 4rpx 20rpx rgba(255, 81, 81, 0.2);
  position: relative;
  z-index: 1;
}

.balance-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.balance-label {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 10rpx;
  display: flex;
  align-items: center;
}

.eye-icon {
  width: 30rpx;
  height: 20rpx;
  margin-left: 10rpx;
}

.balance-value {
  font-size: 40rpx;
  color: #fff;
  font-weight: 500;
}

.balance-divider {
  width: 2rpx;
  height: 60rpx;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 0 20rpx;
}

/* 订单区域 */
.order-section {
  margin: 20rpx 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.view-all {
  display: flex;
  align-items: center;
}

.view-all-text {
  font-size: 26rpx;
  color: #999;
}

.arrow-icon {
  width: 24rpx;
  height: 24rpx;
  margin-left: 6rpx;
  background-image: url('/static/Images/user/Quanbu.png');
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  
}

.order-icons {
  display: flex;
  justify-content: space-between;
}

.order-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
}

.order-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.order-icon-text {
  font-size: 24rpx;
  color: #666;
}

/* 功能模块区域 */
.feature-grid {
  margin: 20rpx 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.feature-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}

.feature-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.feature-text {
  font-size: 24rpx;
  color: #666;
}

.safe-area-bottom {
  height: env(safe-area-inset-bottom);
}
</style>